<template>
  <div id="flight-search">
    <div class="card">
      <div class="card-header py-0 my-0">
        <nav aria-label="breadcrumb" role="navigation">
          <ol class="breadcrumb pb-0">
            <li class="breadcrumb-item active" aria-current="page">机票预订</li>
            <li class="breadcrumb-item ms-auto">
              <router-link to="/flt/orders">机票订单</router-link>
            </li>
          </ol>
        </nav>
      </div>
      <div class="card-body py-0 my-1">
        <form class="row align-items-center">
          <div class="col-auto">
            <label>出发</label>
          </div>
          <div class="col-auto">
            <input
              type="text"
              class="form-control mb-2 me-sm-2"
              placeholder="城市或机场三字代码"
              size="8"
              v-model="dcity"
            />
          </div>
          <div class="col-auto">
            <label>到达</label>
          </div>
          <div class="col-auto">
            <input
              type="text"
              class="form-control mb-2 me-sm-2"
              placeholder="城市或机场三字代码"
              size="8"
              v-model="acity"
            />
          </div>
          <div class="col-auto">
            <label>日期</label>
          </div>
          <div class="col-auto">
            <my-date-picker
              id="endDate"
              name="sc.endDate"
              v-model="ddate"
              placeholder="出发日期"
            ></my-date-picker>
          </div>
          <div class="col">
            <button
              type="button"
              @click.stop="search($event.target)"
              class="btn btn-primary"
            >
              搜索
            </button>
          </div>
        </form>
      </div>
      <flight-search-result :flights="searchFlightResults"></flight-search-result>
     
      <div class="card col-12 text-end mt-1 border-0" v-if="totalCount > 0">
        <span class="text-info">
          <small>共</small>
          {{ showCount }}/{{ totalCount }}
          <small>航班</small>
        </span>
      </div>
    </div>

    <div class="modal" tabindex="-1" id="tgqModal">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MyDatePicker from "@/components/my-datepicker.vue";
import { getCabinClassDesc, addDate, tomorrow } from "@/common/common.js";
import { rav, searchTgq, searchStopover } from "@/api/flight.js";
import $ from "jquery";
import FlightSearchResult from "./flight-search-result.vue"

export default {
  components: {
    MyDatePicker,
    FlightSearchResult
  },
  data() {
    return {
      searching: false,

      flt: null,

      searchFlightResults: [],

      totalCount: 0,
      showCount: 0,

      detailFlightId: "", // 显示哪一个航班的详情信息,

      dcity: null,
      acity: null,
      ddate: null,
    };
  },
  watch: {
    dcity: function (newVal, oldVal) {
      this.$store.commit("setDcity", { cityCode: this.dcity });
    },
    acity: function (newVal, oldVal) {
      this.$store.commit("setAcity", { cityCode: this.acity });
    },
    ddate: function (newVal, oldVal) {
      this.$store.commit("setDdate", this.ddate);
    },
  },
  mounted: function () {
    this.init();
  },
  methods: {
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("hideLoading");
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    init: function () {
      if (this.dcity == null) {
        const newDate = addDate(this.ddate, 1);
        this.ddate = tomorrow();
        this.dcity = "SHA";
        this.acity = "CAN";
        this.$store.commit("setDcity", { cityCode: "SHA" });
        this.$store.commit("setAcity", { cityCode: "CAN" });
        this.$store.commit("setDdate", tomorrow());
      }
    },
    search: function (btn) {
      this.searchFlightResults.splice(0);
      if (
        this.dcity === undefined ||
        this.acity === undefined ||
        this.ddate === undefined
      ) {
        this.showErrMsg("请确定下需要查什么");
        return;
      }

      if (this.dcity.length !== 3 || this.acity.length !== 3) {
        this.showErrMsg("请选择出发/到达城市");
        return;
      }

      if (this.dcity === this.acity) {
        this.showErrMsg("出发和到达城市不能相同");
        return;
      }

      if (this.ddate.length <= 8) {
        this.showErrMsg("请选定乘机日期");
        return;
      }

      this.showLoading();

      // 查询航班
      const params = {
        startPosition: -1,
        dcity: this.dcity,
        acity: this.acity,
        ddate: this.ddate,
        source: 1,
      };

      console.log(params);

      rav(params, this.ravDone, this.ravFail, this.ravAlways);
    },
    ravDone: function (v) {
      if (v.errcode !== 0) {
        this.showErrMsg(v.errmsg, "danger");
        return;
      }

      let self = this;

      let len1 = v.dataList.length;

      for (let i = 0; i < len1; i++) {
        self.searchFlightResults.push(v.dataList[i]);
      }
    },
    ravFail: function (status, statusText) {
      this.searching = false;
      this.showErrMsg(status + " " + statusText, "danger");
    },
    ravAlways: function () {
      this.hideLoading();
    },
    
    bookFlight: function (flt0, subclass0, policyCode) {
      console.log(flt0);
      var fltInfo = {
        flightNo: flt0.flightNo,
        carrierName: flt0.carrierName,
        ddate: flt0.ddate,
        dport: flt0.dport,
        aport: flt0.aport,
        dtime: flt0.dtime,
        showDtime: flt0.dtime,
        atime: flt0.atime,
        showAtime: flt0.atime,
        dportName: flt0.dportName,
        dterm: flt0.dterm,
        aportName: flt0.aportName,
        aterm: flt0.aterm,
        subclass: subclass0.subClass,
        price: subclass0.price,
        returnPoint: subclass0.returnPoint,
        airportTax: flt0.airportTax,
        fuelSurcharge: flt0.fuelSurcharge,
        tax: flt0.airportTax + flt0.fuelSurcharge,
        policyCode: policyCode,
        changeRule: subclass0.changeRule,
        refundRule: subclass0.refundRule,
        aircraft: flt0.aircraft,
      };
      console.log(fltInfo);

      this.$store.dispatch("addFlight", fltInfo);
      this.$router.replace("/flt/booking");
    },
    showTGQ: function (tgqInfo) {
      var self = this;
      var tgqDetail = `<table class='table'>
        <thead>
          <tr>
            <th></th>
            <th>${tgqInfo.tamountList[0].title}</th>
            <th>${tgqInfo.tamountList[1].title}</th>
            <th>${tgqInfo.tamountList[2].title}</th>
            <th>${tgqInfo.tamountList[3].title}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>退票</th>
            <th>${tgqInfo.tamountList[0].amount}</th>
            <th>${tgqInfo.tamountList[1].amount}</th>
            <th>${tgqInfo.tamountList[2].amount}</th>
            <th>${tgqInfo.tamountList[3].amount}</th>
          </tr>
          <tr>
            <th>改签</th>
            <th>${tgqInfo.gamountList[0].amount}</th>
            <th>${tgqInfo.gamountList[1].amount}</th>
            <th>${tgqInfo.gamountList[2].amount}</th>
            <th>${tgqInfo.gamountList[3].amount}</th>
          </tr>
        </body>
      `;

      self.dispalyTgqInfo("退改信息", tgqDetail);
    },
    showLuggageInfo: function (luggageInfos) {
      console.log(luggageInfos);
      let htmlInfo = `
        <table class="table table-response">
                          <tr>
                            <td></td>
                            <td>title</td>
                            <td>freeLimit</td>
                            <td>volumeLimit</td>
                            <td>weightLimit</td>
                          </tr>
                          `;
      console.log(htmlInfo);
      for (let info of luggageInfos) {
        htmlInfo += `
                    <tr>
                            <td>
                              ${info.luggageType}
                            </td>
                            <td>${info.title}</td>
                            <td>${info.freeLimit}</td>
                            <td>${info.volumeLimit}</td>
                            <td>${info.weightLimit}</td>
                          </tr>
                  `;
      }
      console.log(htmlInfo);

      htmlInfo += `
      </table>
      `;
      console.log(htmlInfo);
      this.dispalyTgqInfo("行李信息", htmlInfo);
    },
    dispalyTgqInfo: function (title, tgqDetail) {
      var modal = $("#tgqModal");
      modal.find(".modal-title").text(title);
      modal.find(".modal-body").html(tgqDetail);
      modal.modal("show");
    },
    changeDdate: function (x) {
      var newDate = addDate(this.ddate, x);

      this.$store.commit("setDdate", newDate);
      this.readyToSearch();
    },
    
    showStopover: function (flightNo, ddate) {
      const params = {
        flightNo,
        ddate,
      };
      searchStopover(params, (v) => {
        console.log(v);
        let htmlInfo = `
        <table class="table table-response">
                          <tr>
                            <td>机场</td>
                            <td>到达时间</td>
                            <td>出发时间</td>
                          </tr>
                          `;
        console.log(htmlInfo);
        for (let info of v.flights) {
          htmlInfo += `
                    <tr>
                            <td>
                              ${info.airportName}
                            </td>
                            <td>${info.atime}</td>
                            <td>${info.dtime}</td>
                          </tr>
                  `;
        }
        console.log(htmlInfo);

        htmlInfo += `
      </table>
      `;
        console.log(htmlInfo);
        this.dispalyTgqInfo("经停信息", htmlInfo);
      });
    },
  },
};
</script>
